


import React, { useState } from 'react'
import { Button, Upload, Select, Radio, Tooltip, Row, Col, message } from 'antd'
import CheckBtn from '../../../components/customerseas/CheckBtn'
import IconFont from './../../../components/customerseas/IconFont'
const { Option } = Select;
const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
        authorization: 'authorization-text',
    },
    onChange(info) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
        console.log(info);
    }
}
//复选按钮数组
const checkArr = [
    { id: '1', title: '客户名称', check: false },
    { id: '2', title: '联系人', check: false },
    { id: '3', title: '手机号码', check: false },]
export default function ImportSeas(props) {

    //select框
    const [value, setValue] = useState(1);
    //去重数据
    const [state, setstate] = useState(checkArr);
    function handleChange(value) {
        console.log(`selected ${value}`);
    }
    //单选框组合
    const onChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };

    //获取子组件的数组
    const getChecked = (id) => {
        checkArr.forEach((item) => {
            if (item.id == id) {
                item.check = !item.check
            }
        })
        setstate(checkArr.concat([]))
    }
    //查看图片
    const openImg = () => {

        window.open('https://demo.126e.com/include/helps/daoru.png')
    }
    return (
        <>
            <div className='header'>Excel数据导入</div>
            <div className='titles'>
                <b className='red'>特别提示：请先</b>
                <button className='downFile'>下载客户导入模板</button>
                <b className='red'>并填写Excel表格</b>
            </div>
            <table className='importTable' style={{ width: '100%' }}>
                <tbody>
                    <tr>
                        <td>上传文件</td>
                        <td>
                            <Row align='middle'>
                                <Col >
                                    <Upload {...props} maxCount={1}>
                                        <Button size='large' style={{ color: 'white', backgroundColor: '#448aca', borderRadius: '5px' }}>选择文件</Button>
                                    </Upload>
                                </Col>
                                <Col span={1} style={{ textAlign: 'right' }}>
                                    <Tooltip title="只允许上传.xls格式">
                                        <IconFont style={{ fontSize: '22px' }} type='icon-bangzhu' />
                                    </Tooltip>
                                </Col>
                            </Row>
                        </td>
                    </tr>
                    <tr>
                        <td>Excel数据表格</td>
                        <td>
                            <Row align='middle'>
                                <Col >
                                    <Select defaultValue="Sheet1" style={{ width: 120 }} onChange={handleChange}>
                                        <Option value="Sheet1">Sheet1</Option>
                                        <Option value="Sheet2">Sheet2</Option>
                                        <Option value="Sheet3">Sheet3</Option>
                                    </Select>
                                </Col>
                                <Col span={1} style={{ textAlign: 'right' }}>
                                    <Tooltip title="位置:Excel文件左下角">
                                        <IconFont style={{ fontSize: '22px' }} type='icon-bangzhu' />
                                    </Tooltip>
                                </Col>
                                <Col offset={1} style={{ textAlign: 'right' }}>
                                    <img src="https://demo.126e.com/theme/default/images/exceldb.jpg" alt="" />
                                </Col>
                            </Row>
                        </td>
                    </tr>
                    <tr>
                        <td>导入目标</td>
                        <td>
                            <Radio.Group onChange={onChange} value={value}>
                                <Radio value={1}>导入到公海</Radio>
                                <Radio value={2}>导入给业务员</Radio>
                            </Radio.Group>
                            {value == 2 ?
                                <Select defaultValue="超级管理员" style={{ width: 120 }} onChange={handleChange}>
                                    <Option value="超级管理员">超级管理员</Option>
                                    <Option value="销售">销售</Option>
                                </Select> : ''
                            }
                        </td>
                    </tr>
                    <tr>
                        <td>去除重复数据</td>
                        <td>
                            <CheckBtn stateBtn={state} click={getChecked} />
                        </td>
                    </tr>
                    <tr>
                        <td>注意事项</td>
                        <td>
                            <ol>
                                <li>单元格中 <b>表头字段顺序</b> 不能改变 ，字段不能删除；</li>
                                <li>单元格中 <b>客户名称</b> 为必填；</li>
                                <li>单元格限 <b>255 字节</b> ，内容过多会被截取；</li>
                                <li>建议每次导入数据量在 <b>5000 条</b> 以内；</li>
                            </ol>
                        </td>
                    </tr>
                    <tr>
                        <td colSpan={2}><Button onClick={openImg} size='large'> &gt;&gt;导入报错解决方案&lt;&lt;</Button></td>
                    </tr>
                </tbody>
            </table>
            <div className='footer'>
                <Button size='large' onClick={() => props.handImpleOk(value,state)} >开始导入</Button>
                <Button size='large' onClick={() => props.handleImpCancel()} >关闭</Button>
            </div>
        </>
    )
}